import { Table, Space, Button, Card, message, Cascader, Image, Breadcrumb } from "antd";
import { useEffect, useState } from "react";
import { useHistory } from "react-router";
import { useComms } from "../../hook/comms";
import { useOneComm } from "../../hook/oneComm";
import { useAllTypes } from "../../hook/allTypes"

import _ from "lodash";


//eslint-disable-next-line
export default () => {
    const history = useHistory()
    const [allType, { getAllTypes }] = useAllTypes();
    const [{ rows, eachPage, curPage, total }, { getComms, setCurPage, delComm }] = useComms();
    const [, { getOneComm }] = useOneComm();
    const [childId, setChildId] = useState("")
    // 数据请求
    useEffect(() => {
        async function fetchData() {
            await getAllTypes()
        }
        fetchData();
        getComms(childId);
    }, [getComms, childId,getAllTypes]);

    // 修改类型信息
    const reset = async _id => {
        await getOneComm(_id)
        history.push(`/info/comms/reset/${_id}`)
    }

    // 删除类型信息
    const delComms = async _id => {
        await delComm(_id);
        message.success("删除成功")
        getComms();
    }

    const options = _.map(allType, item => {
        return {
            label: item.title,
            value: item._id,
            children: _.map(item.labels, i => {
                return {
                    label: i.title,
                    value: i._id
                }
            })
        }
    })

    const columns = [
        {
            title: '商品名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '库存',
            dataIndex: 'count',
            key: 'count',
        },
        {
            title: '价格',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '商品详情',
            dataIndex: 'desc',
            key: 'desc',
        },
        {
            title: '商品海报',
            dataIndex: 'poster',
            key: 'poster',
            render: record => {
                return record[0] ? <Image width={50} src={`http://localhost:3002${record[0]}`} /> : <p>暂无图片</p>;
            },
        },
        {
            title: '操作',
            key: 'action',
            render: record => (
                <Space size="middle">
                    <Button type="primary"  size="small" onClick={() => reset(record._id)}>修改</Button>
                    <Button type="primary" danger  size="small" onClick={() => delComms(record._id)}>删除</Button>
                </Space>
            ),
        },
    ];

    // 下拉框选择完成之后
    const onChange = (value) => {
        console.log(value);
        setChildId(value[1])
    }

    return (
        <div className="site-card-border-less-wrapper">

            <Card title="查询" bordered={true}>
                <Cascader options={options} placeholder="请选择商品类型" onChange={onChange}></Cascader>
            </Card>
            <div style={{ height: "30px" }}></div>

            <Card title="商品列表" bordered={true}>
                <Card>
                    <Breadcrumb>
                        <Breadcrumb.Item>主页</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            商品
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </Card>
                <Table style={{ maeginTop: "20px" }} columns={columns} pagination={{
                    current: curPage, pageSize: eachPage, total, onChange: setCurPage
                }} dataSource={rows} rowKey={record => record._id} />
            </Card>
        </div>
    )
}